<template>
  <div class="mei-item">
    <router-link :to="{name: 'Classify'}">
      <van-image width="100%" height="100%" :lazy-load="i >=3 ? true : false" :src="obj.imageUrl" />
      <div class="content" v-if="obj.siloCategory">
        <p>{{obj.englishName}}</p>
        <p>{{obj.chineseName}}</p>
        <p>{{obj.discountText}}</p>
        <p>{{obj.siloCategory}}</p>
      </div>
    </router-link>
  </div>
</template>

<script>
import Vue from 'vue'
import { Card, Image, Lazyload } from 'vant'
Vue.use(Card).use(Image).use(Lazyload)

export default {
  props: {
    obj: {
      type: Object,
      required: true
    },
    i: {
      type: Number,
      required: true
    }
  },
  // mounted() {
  //   console.log(this.obj)
  // }
}
</script>

<style lang="scss" scoped>
.mei-item {
  width: 90vw;
  padding: 26px 10px;
  position: relative;
  .content {
    text-align: left;
    position: absolute;
    bottom: 30px;
    left: 45px;
    font-size: 12px;
    background-color: transparent;
    p {
      color: #fff;
    }
    p:first-of-type {
      font-size: 14px;
      // line-height: .3rem;
    }
  }
}
</style>
